<template>
  <Card style="width:100%" class="detail-content-layout mb16">
    <template #title>
      {{$t('最终验收审批')}}
    </template>
    <template #extra>
      <div class="h-arrow-wrap" @click="toggle = !toggle">
        <i :class="{toggleActive:toggle}" class="iconfont zy-common-jiantou h-arrow-icon"></i>
      </div>
    </template>
    <transition name="slide-up">
      <div v-if="toggle">
        <Form ref="form" :model="form" :rules="rules" label-position="top">
          <Row :gutter="24">
            <Col span="24" v-if="Array.isArray(fatApprovals)">
              <FormItem :label="$t('审批人')" >
                <Tag v-for="(item,index) in fatApprovals" :key="index" color="blue">{{item.createBy}}</Tag>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem :label="$t('审批')" prop="approvalStatus">
                <Select
                    transfer
                    :disabled="disabled"
                    v-model="form.approvalStatus"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                >
                  <Option v-for="(item,index) in approvalList" :key="index" :label="item.label" :value="item.value"/>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem :label="$t('备注')" prop="remark" :required="form.approvalStatus==0">
                <Input maxlength="200" :disabled="disabled" clearable type="text" v-model="form.remark" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem  :label="$t('审批人')" v-if="disabled">
                <Input disabled clearable type="text" v-model="form.approvalByStr" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
            <Col span="6" v-if="disabled">
              <FormItem :label="$t('审批时间')">
                <Input disabled clearable type="text" v-model="form.approvalTime" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </transition>
  </Card>
</template>

<script>
import mixins from './mixins'
export default {
  name: "fatApproval",
  components:{},
  mixins:[mixins],
  props: {
    info: {
      type: Object,
      default: ()=> {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    approvalInfo:{
      type: Object,
      default: ()=> {}
    }
  },
  data() {
    const validatorRemark = (rule, value, callback) => {
      if (!value && this.form.approvalStatus == 0) {
        callback(new Error(this.$t('请输入')));
      } else {
        callback();
      }
    }
    return {
      toggle: true,
      form:{},
      rules:{
        approvalStatus: [{required: true, type:"number",message: this.$t('请选择'), trigger: 'change'}],
        remark: [{type: "string", message: this.$t('请输入'), trigger: 'blur', validator: validatorRemark}],
      },
      fatApprovals:[]
    }
  },
  created() {
    this.fatApprovals = this.info.fatApprovals
    if (this.disabled) {
      const {approvalByStr,approvalTime,status,approvalRemark} = this.approvalInfo

      this.form = Object.assign(this.form, {
        approvalTime,
        remark:approvalRemark,
        approvalStatus: status,
        approvalByStr
      })
      this.toggle = false
      this.$forceUpdate()
    }else{
      this.form.approvalByStr = this.userName
    }
  },
  methods:{
    async getParams() {
      const valid = await this.$refs.form.validate()
      if (valid) {
        return {
          ...this.form
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "./style";
</style>

